<template>
  <!-- <h1>hello</h1>-->
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import resize from '@/views/dashboard/mixins/resize'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

import {OrderInfo} from "@/api/order/order";

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      OrderInfo().then(response => {
        let names=[];//订单商品名称
        let values=[];//商品订单消费总额
        console.log(response.data);
        for(let i=0;i<response.data.length;i++){
          names.push(response.data[i].name);
          values.push(response.data[i].number);
        }
        const chartData = names.map((name, index) => ({
          value: values[index],
          name: name
        }));
        this.chart.setOption({
          title:{
            text:"商品销售总额统计",
            left:'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            max:5,
            type: 'scroll',
          },
          series: [
            {
              name: '销售总额',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: chartData
            }
          ]
        })
      })
    }
  }
}
</script>
<style>
</style>
